@@include('./partials/html.html')

<head>
    @@include("./partials/title-meta.html", {"title": "Image Crop"})

    <!-- Cropper css -->
    <link href="assets/vendor/cropper/cropper.min.css" rel="stylesheet" type="text/css" />

    @@include('./partials/head-css.html')
</head>

<body>
    <!-- Begin page -->
    <div class="wrapper">

        @@include('./partials/menu.html')

        <!-- ============================================================== -->
        <!-- Start Page Content here -->
        <!-- ============================================================== -->

        <div class="content-page">
            <div class="content">

                <!-- Start Content-->
                <div class="container-fluid">

                    @@include("./partials/page-title.html", {"subtitle":"Forms","title":"Image Crop"})

                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-9">
                                            <div class="img-container">
                                                <img id="image" src="assets/images/small/small-1.jpg" alt="Picture"
                                                    class="img-fluid">
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="image-crop-preview clearfix">
                                                <div class="img-preview preview-lg rounded"></div>
                                                <div class="img-preview preview-md rounded"></div>
                                                <div class="img-preview preview-sm rounded"></div>
                                                <div class="img-preview preview-xs rounded"></div>
                                            </div>

                                            <div class="docs-data">
                                                <div class="input-group mt-2">
                                                    <span class="input-group-text" for="dataX">X</span>
                                                    <input type="text" class="form-control" id="dataX" placeholder="x">
                                                    <span class="input-group-text">px</span>
                                                </div>
                                                <div class="input-group mt-2">
                                                    <span class="input-group-text" for="dataY">Y</span>
                                                    <input type="text" class="form-control" id="dataY" placeholder="y">
                                                    <span class="input-group-text">px</span>
                                                </div>
                                                <div class="input-group mt-2">
                                                    <span class="input-group-text" for="dataWidth">Width</span>
                                                    <input type="text" class="form-control" id="dataWidth" placeholder="width">
                                                    <span class="input-group-text">px</span>
                                                </div>
                                                <div class="input-group mt-2">
                                                    <span class="input-group-text" for="dataHeight">Height</span>
                                                    <input type="text" class="form-control" id="dataHeight" placeholder="height">
                                                    <span class="input-group-text">px</span>
                                                </div>
                                                <div class="input-group mt-2">
                                                    <span class="input-group-text" for="dataRotate">Rotate</span>
                                                    <input type="text" class="form-control" id="dataRotate" placeholder="rotate">
                                                    <span class="input-group-text">deg</span>
                                                </div>
                                                <div class="input-group mt-2">
                                                    <span class="input-group-text" for="dataScaleX">ScaleX</span>
                                                    <input type="text" class="form-control" id="dataScaleX" placeholder="scaleX">
                                                </div>
                                                <div class="input-group mt-2">
                                                    <span class="input-group-text" for="dataScaleY">ScaleY</span>
                                                    <input type="text" class="form-control" id="dataScaleY" placeholder="scaleY">
                                                </div>
                                            </div> <!-- end .doc-data -->

                                        </div> <!-- end col -->
                                    </div><!--end row-->
                                </div> <!-- end card-body -->
                            </div> <!-- end card-->
                        </div> <!-- end col-->
                    </div>
                    <!--end row-->


                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-9 img-crop-preview-btns docs-buttons">
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-success btn-sm"
                                                    data-method="setDragMode" data-option="move" title="Move">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false"
                                                        title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
                                                        <span class="mdi mdi-cursor-move"></span>
                                                    </span>
                                                </button>
                                                <button type="button" class="btn btn-success btn-sm"
                                                    data-method="setDragMode" data-option="crop" title="Crop">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false"
                                                        title="$().cropper(&quot;setDragMode&quot;, &quot;crop&quot;)">
                                                        <span class="mdi mdi-crop"></span>
                                                    </span>
                                                </button>
                                            </div>

                                            <div class="btn-group">
                                                <button type="button" class="btn btn-success btn-sm" data-method="zoom"
                                                    data-option="0.1" title="Zoom In">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false"
                                                        title="$().cropper(&quot;zoom&quot;, 0.1)">
                                                        <span class="mdi mdi-magnify-plus-outline"></span>
                                                    </span>
                                                </button>
                                                <button type="button" class="btn btn-success btn-sm" data-method="zoom"
                                                    data-option="-0.1" title="Zoom Out">
                                                    <span class="mdi mdi-magnify-minus-outline" data-bs-toggle="tooltip"
                                                        data-bs-animation="false"
                                                        title="$().cropper(&quot;zoom&quot;, -0.1)">
                                                    </span>
                                                </button>
                                            </div>

                                            <div class="btn-group">
                                                <button type="button" class="btn btn-success btn-sm" data-method="move"
                                                    data-option="-10" data-second-option="0" title="Move Left">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false"
                                                        title="$().cropper(&quot;move&quot;, -10, 0)">
                                                        <span class="mdi mdi-arrow-left"></span>
                                                    </span>
                                                </button>
                                                <button type="button" class="btn btn-success btn-sm" data-method="move"
                                                    data-option="10" data-second-option="0" title="Move Right">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false"
                                                        title="$().cropper(&quot;move&quot;, 10, 0)">
                                                        <span class="mdi mdi-arrow-right"></span>
                                                    </span>
                                                </button>
                                                <button type="button" class="btn btn-success btn-sm" data-method="move"
                                                    data-option="0" data-second-option="-10" title="Move Up">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false"
                                                        title="$().cropper(&quot;move&quot;, 0, -10)">
                                                        <span class="mdi mdi-arrow-up"></span>
                                                    </span>
                                                </button>
                                                <button type="button" class="btn btn-success btn-sm" data-method="move"
                                                    data-option="0" data-second-option="10" title="Move Down">
                                                    <span class="mdi mdi-arrow-down" data-bs-toggle="tooltip"
                                                        data-bs-animation="false"
                                                        title="$().cropper(&quot;move&quot;, 0, 10)">
                                                    </span>
                                                </button>
                                            </div>

                                            <div class="btn-group">
                                                <button type="button" class="btn btn-success btn-sm"
                                                    data-method="rotate" data-option="-45" title="Rotate Left">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false"
                                                        title="$().cropper(&quot;rotate&quot;, -45)">
                                                        <span class="mdi mdi-rotate-left"></span>
                                                    </span>
                                                </button>
                                                <button type="button" class="btn btn-success btn-sm"
                                                    data-method="rotate" data-option="45" title="Rotate Right">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false"
                                                        title="$().cropper(&quot;rotate&quot;, 45)">
                                                        <span class="mdi mdi-rotate-right"></span>
                                                    </span>
                                                </button>
                                            </div>

                                            <div class="btn-group">
                                                <button type="button" class="btn btn-success btn-sm"
                                                    data-method="scaleX" data-option="-1" title="Flip Horizontal">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false"
                                                        title="$().cropper(&quot;scaleX&quot;, -1)">
                                                        <span class="mdi mdi-arrow-left-right"></span>
                                                    </span>
                                                </button>
                                                <button type="button" class="btn btn-success btn-sm"
                                                    data-method="scaleY" data-option="-1" title="Flip Vertical">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false"
                                                        title="$().cropper(&quot;scaleY&quot;, -1)">
                                                        <span class="mdi mdi-arrow-up-down"></span>
                                                    </span>
                                                </button>
                                            </div>

                                            <div class="btn-group">
                                                <button type="button" class="btn btn-success btn-sm" data-method="crop"
                                                    title="Crop">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false" title="$().cropper(&quot;crop&quot;)">
                                                        <span class="mdi mdi-check"></span>
                                                    </span>
                                                </button>
                                                <button type="button" class="btn btn-success btn-sm" data-method="clear"
                                                    title="Clear">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false"
                                                        title="$().cropper(&quot;clear&quot;)">
                                                        <span class="mdi mdi-close"></span>
                                                    </span>
                                                </button>
                                            </div>

                                            <div class="btn-group">
                                                <button type="button" class="btn btn-success btn-sm"
                                                    data-method="disable" title="Disable">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false"
                                                        title="$().cropper(&quot;disable&quot;)">
                                                        <span class="mdi mdi-lock-outline"></span>
                                                    </span>
                                                </button>
                                                <button type="button" class="btn btn-success btn-sm"
                                                    data-method="enable" title="Enable">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false"
                                                        title="$().cropper(&quot;enable&quot;)">
                                                        <span class="mdi mdi-lock-open-variant-outline"></span>
                                                    </span>
                                                </button>
                                            </div>

                                            <div class="btn-group">
                                                <button type="button" class="btn btn-success btn-sm" data-method="reset"
                                                    title="Reset">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false"
                                                        title="$().cropper(&quot;reset&quot;)">
                                                        <span class="mdi mdi-sync"></span>
                                                    </span>
                                                </button>
                                                <label class="btn btn-success mb-0 btn-upload btn-sm" for="inputImage"
                                                    title="Upload image file">
                                                    <input type="file" class="visually-hidden" id="inputImage"
                                                        name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false" title="Import image with Blob URLs">
                                                        <span class="mdi mdi-upload"></span>
                                                    </span>
                                                </label>
                                                <button type="button" class="btn btn-danger btn-sm"
                                                    data-method="destroy" title="Destroy">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false"
                                                        title="$().cropper(&quot;destroy&quot;)">
                                                        <span class="mdi mdi-power"></span>
                                                    </span>
                                                </button>
                                            </div>
                                            <br />

                                            <div class="btn-group btn-group-crop">
                                                <button type="button" class="btn btn-success btn-sm"
                                                    data-method="getCroppedCanvas"
                                                    data-option="{ &quot;maxWidth&quot;: 4096, &quot;maxHeight&quot;: 4096 }">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false"
                                                        title="$().cropper(&quot;getCroppedCanvas&quot;, { maxWidth: 4096, maxHeight: 4096 })">
                                                        Get Cropped Canvas
                                                    </span>
                                                </button>
                                                <button type="button" class="btn btn-success btn-sm"
                                                    data-method="getCroppedCanvas"
                                                    data-option="{ &quot;width&quot;: 160, &quot;height&quot;: 90 }">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false"
                                                        title="$().cropper(&quot;getCroppedCanvas&quot;, { width: 160, height: 90 })">
                                                        160&times;90
                                                    </span>
                                                </button>
                                                <button type="button" class="btn btn-success btn-sm"
                                                    data-method="getCroppedCanvas"
                                                    data-option="{ &quot;width&quot;: 320, &quot;height&quot;: 180 }">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false"
                                                        title="$().cropper(&quot;getCroppedCanvas&quot;, { width: 320, height: 180 })">
                                                        320&times;180
                                                    </span>
                                                </button>
                                            </div>

                                            <div class="modal fade docs-cropped" id="getCroppedCanvasModal"
                                                aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog"
                                                tabindex="-1">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="getCroppedCanvasTitle">Cropped
                                                            </h5>
                                                            <button type="button" class="close" data-dismiss="modal"
                                                                aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                        </div>
                                                        <div class="modal-body text-center"></div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-primary"
                                                                data-dismiss="modal">Close</button>
                                                            <a class="btn btn-outline-info" id="download"
                                                                href="javascript:void(0);"
                                                                download="cropped.jpg">Download</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <button type="button" class="btn btn-primary btn-sm" data-method="getData"
                                                data-option data-target="#putData">
                                                <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                    data-animation="false" title="$().cropper(&quot;getData&quot;)">
                                                    Get Data
                                                </span>
                                            </button>
                                            <button type="button" class="btn btn-primary btn-sm" data-method="setData"
                                                data-target="#putData">
                                                <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                    data-animation="false"
                                                    title="$().cropper(&quot;setData&quot;, data)">
                                                    Set Data
                                                </span>
                                            </button>
                                            <button type="button" class="btn btn-primary btn-sm"
                                                data-method="getContainerData" data-option data-target="#putData">
                                                <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                    data-animation="false"
                                                    title="$().cropper(&quot;getContainerData&quot;)">
                                                    Get Container Data
                                                </span>
                                            </button>
                                            <button type="button" class="btn btn-primary btn-sm"
                                                data-method="getImageData" data-option data-target="#putData">
                                                <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                    data-animation="false"
                                                    title="$().cropper(&quot;getImageData&quot;)">
                                                    Get Image Data
                                                </span>
                                            </button>
                                            <button type="button" class="btn btn-primary btn-sm"
                                                data-method="getCanvasData" data-option data-target="#putData">
                                                <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                    data-animation="false"
                                                    title="$().cropper(&quot;getCanvasData&quot;)">
                                                    Get Canvas Data
                                                </span>
                                            </button>
                                            <button type="button" class="btn btn-primary btn-sm"
                                                data-method="setCanvasData" data-target="#putData">
                                                <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                    data-animation="false"
                                                    title="$().cropper(&quot;setCanvasData&quot;, data)">
                                                    Set Canvas Data
                                                </span>
                                            </button>
                                            <button type="button" class="btn btn-primary btn-sm"
                                                data-method="getCropBoxData" data-option data-target="#putData">
                                                <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                    data-animation="false"
                                                    title="$().cropper(&quot;getCropBoxData&quot;)">
                                                    Get Crop Box Data
                                                </span>
                                            </button>
                                            <button type="button" class="btn btn-primary btn-sm"
                                                data-method="setCropBoxData" data-target="#putData">
                                                <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                    data-animation="false"
                                                    title="$().cropper(&quot;setCropBoxData&quot;, data)">
                                                    Set Crop Box Data
                                                </span>
                                            </button>
                                            <button type="button" class="btn btn-primary btn-sm" data-method="moveTo"
                                                data-option="0">
                                                <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                    data-animation="false" title="cropper.moveTo(0)">
                                                    Move to [0,0]
                                                </span>
                                            </button>
                                            <button type="button" class="btn btn-primary btn-sm" data-method="zoomTo"
                                                data-option="1">
                                                <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                    data-animation="false" title="cropper.zoomTo(1)">
                                                    Zoom to 100%
                                                </span>
                                            </button>
                                            <button type="button" class="btn btn-primary btn-sm" data-method="rotateTo"
                                                data-option="180">
                                                <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                    data-animation="false" title="cropper.rotateTo(180)">
                                                    Rotate 180°
                                                </span>
                                            </button>
                                            <button type="button" class="btn btn-primary btn-sm" data-method="scale"
                                                data-option="-2" data-second-option="-1">
                                                <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                    title="cropper.scale(-2, -1)">
                                                    Scale (-2, -1)
                                                </span>
                                            </button>
                                            <textarea class="form-control" id="putData" rows="1"
                                                placeholder="Get data to here or set data with this value"></textarea>
                                        </div> <!-- end col -->

                                        <div class="col-lg-3 docs-toggles">
                                            <div class="btn-group btn-group-sm d-flex flex-nowrap mb-2"
                                                data-bs-toggle="buttons">
                                                <label class="btn btn-outline-success active">
                                                    <input type="radio" class="sr-only" id="aspectRatio0"
                                                        name="aspectRatio" value="1.7777777777777777">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false" title="aspectRatio: 16 / 9">
                                                        16:9
                                                    </span>
                                                </label>
                                                <label class="btn btn-outline-success">
                                                    <input type="radio" class="sr-only" id="aspectRatio1"
                                                        name="aspectRatio" value="1.3333333333333333">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false" title="aspectRatio: 4 / 3">
                                                        4:3
                                                    </span>
                                                </label>
                                                <label class="btn btn-outline-success">
                                                    <input type="radio" class="sr-only" id="aspectRatio2"
                                                        name="aspectRatio" value="1">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false" title="aspectRatio: 1 / 1">
                                                        1:1
                                                    </span>
                                                </label>
                                                <label class="btn btn-outline-success">
                                                    <input type="radio" class="sr-only" id="aspectRatio3"
                                                        name="aspectRatio" value="0.6666666666666666">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false" title="aspectRatio: 2 / 3">
                                                        2:3
                                                    </span>
                                                </label>
                                                <label class="btn btn-outline-success">
                                                    <input type="radio" class="sr-only" id="aspectRatio4"
                                                        name="aspectRatio" value="NaN">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false" title="aspectRatio: NaN">
                                                        Free
                                                    </span>
                                                </label>
                                            </div>

                                            <div class="btn-group btn-group-sm d-flex flex-nowrap mb-2"
                                                data-bs-toggle="buttons">
                                                <label class="btn btn-outline-secondary active">
                                                    <input type="radio" class="sr-only" id="viewMode0" name="viewMode"
                                                        value="0" checked>
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false" title="View Mode 0">
                                                        VM0
                                                    </span>
                                                </label>
                                                <label class="btn btn-outline-secondary">
                                                    <input type="radio" class="sr-only" id="viewMode1" name="viewMode"
                                                        value="1">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false" title="View Mode 1">
                                                        VM1
                                                    </span>
                                                </label>
                                                <label class="btn btn-outline-secondary">
                                                    <input type="radio" class="sr-only" id="viewMode2" name="viewMode"
                                                        value="2">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false" title="View Mode 2">
                                                        VM2
                                                    </span>
                                                </label>
                                                <label class="btn btn-outline-secondary">
                                                    <input type="radio" class="sr-only" id="viewMode3" name="viewMode"
                                                        value="3">
                                                    <span class="docs-tooltip" data-bs-toggle="tooltip"
                                                        data-bs-animation="false" title="View Mode 3">
                                                        VM3
                                                    </span>
                                                </label>
                                            </div>

                                            <div class="dropdown dropup docs-options">
                                                <button type="button" class="btn btn-success btn-block dropdown-toggle"
                                                    id="toggleOptions" data-bs-toggle="dropdown" aria-expanded="true">
                                                    Toggle Options <i class="mdi mdi-chevron-up"></i>
                                                </button>
                                                <ul class="dropdown-menu docs-drop-options"
                                                    aria-labelledby="toggleOptions" role="menu">
                                                    <li class="dropdown-item">
                                                        <div class="form-check">
                                                            <input id="checkbox0" class="form-check-input"
                                                                type="checkbox" name="responsive" checked>
                                                            <label class="form-check-label" for="checkbox0">
                                                                Responsive
                                                            </label>
                                                        </div>
                                                    </li>
                                                    <li class="dropdown-item">
                                                        <div class="form-check">
                                                            <input id="checkbox1" class="form-check-input"
                                                                type="checkbox" name="restore" checked>
                                                            <label class="form-check-label" for="checkbox1">
                                                                Restore
                                                            </label>
                                                        </div>
                                                    </li>
                                                    <li class="dropdown-item">
                                                        <div class="form-check">
                                                            <input id="checkbox2" class="form-check-input"
                                                                type="checkbox" name="checkCrossOrigin" checked>
                                                            <label class="form-check-label" for="checkbox2">
                                                                CheckCrossOrigin
                                                            </label>
                                                        </div>
                                                    </li>
                                                    <li class="dropdown-item">
                                                        <div class="form-check">
                                                            <input id="checkbox3" class="form-check-input"
                                                                type="checkbox" name="checkOrientation" checked>
                                                            <label class="form-check-label" for="checkbox3">
                                                                CheckOrientation
                                                            </label>
                                                        </div>
                                                    </li>
                                                    <li class="dropdown-item">
                                                        <div class="form-check">
                                                            <input id="checkbox4" class="form-check-input"
                                                                type="checkbox" name="modal" checked>
                                                            <label class="form-check-label" for="checkbox4">
                                                                Modal
                                                            </label>
                                                        </div>
                                                    </li>
                                                    <li class="dropdown-item">
                                                        <div class="form-check">
                                                            <input id="checkbox5" class="form-check-input"
                                                                type="checkbox" name="guides" checked>
                                                            <label class="form-check-label" for="checkbox5">
                                                                Guides
                                                            </label>
                                                        </div>
                                                    </li>
                                                    <li class="dropdown-item">
                                                        <div class="form-check">
                                                            <input id="checkbox6" class="form-check-input"
                                                                type="checkbox" name="center" checked>
                                                            <label class="form-check-label" for="checkbox6">
                                                                Center
                                                            </label>
                                                        </div>
                                                    </li>
                                                    <li class="dropdown-item">
                                                        <div class="form-check">
                                                            <input id="checkbox7" class="form-check-input"
                                                                type="checkbox" name="highlight" checked>
                                                            <label class="form-check-label" for="checkbox7">
                                                                Highlight
                                                            </label>
                                                        </div>
                                                    </li>
                                                    <li class="dropdown-item">
                                                        <div class="form-check">
                                                            <input id="checkbox8" class="form-check-input"
                                                                type="checkbox" name="background" checked>
                                                            <label class="form-check-label" for="checkbox8">
                                                                Background
                                                            </label>
                                                        </div>
                                                    </li>
                                                    <li class="dropdown-item">
                                                        <div class="form-check">
                                                            <input id="checkbox9" class="form-check-input"
                                                                type="checkbox" name="autoCrop" checked>
                                                            <label class="form-check-label" for="checkbox9">
                                                                AutoCrop
                                                            </label>
                                                        </div>
                                                    </li>
                                                    <li class="dropdown-item">
                                                        <div class="form-check">
                                                            <input id="checkbox10" class="form-check-input"
                                                                type="checkbox" name="movable" checked>
                                                            <label class="form-check-label" for="checkbox10">
                                                                Movable
                                                            </label>
                                                        </div>
                                                    </li>
                                                    <li class="dropdown-item">
                                                        <div class="form-check">
                                                            <input id="checkbox11" class="form-check-input"
                                                                type="checkbox" name="rotatable" checked>
                                                            <label class="form-check-label" for="checkbox11">
                                                                Rotatable
                                                            </label>
                                                        </div>
                                                    </li>
                                                    <li class="dropdown-item">
                                                        <div class="form-check">
                                                            <input id="checkbox12" class="form-check-input"
                                                                type="checkbox" name="scalable" checked>
                                                            <label class="form-check-label" for="checkbox12">
                                                                Scalable
                                                            </label>
                                                        </div>
                                                    </li>
                                                    <li class="dropdown-item">
                                                        <div class="form-check">
                                                            <input id="checkbox13" class="form-check-input"
                                                                type="checkbox" name="zoomable" checked>
                                                            <label class="form-check-label" for="checkbox13">
                                                                Zoomable
                                                            </label>
                                                        </div>
                                                    </li>
                                                    <li class="dropdown-item">
                                                        <div class="form-check">
                                                            <input id="checkbox14" class="form-check-input"
                                                                type="checkbox" name="zoomOnTouch" checked>
                                                            <label class="form-check-label" for="checkbox14">
                                                                ZoomOnTouch
                                                            </label>
                                                        </div>
                                                    </li>
                                                    <li class="dropdown-item">
                                                        <div class="form-check">
                                                            <input id="checkbox15" class="form-check-input"
                                                                type="checkbox" name="zoomOnWheel" checked>
                                                            <label class="form-check-label" for="checkbox15">
                                                                ZoomOnWheel
                                                            </label>
                                                        </div>
                                                    </li>
                                                    <li class="dropdown-item">
                                                        <div class="form-check">
                                                            <input id="checkbox16" class="form-check-input"
                                                                type="checkbox" name="cropBoxMovable" checked>
                                                            <label class="form-check-label" for="checkbox16">
                                                                CropBoxMovable
                                                            </label>
                                                        </div>
                                                    </li>
                                                    <li class="dropdown-item">
                                                        <div class="form-check">
                                                            <input id="checkbox17" class="form-check-input"
                                                                type="checkbox" name="cropBoxResizable" checked>
                                                            <label class="form-check-label" for="checkbox17">
                                                                CropBoxResizable
                                                            </label>
                                                        </div>
                                                    </li>
                                                    <li class="dropdown-item">
                                                        <div class="form-check">
                                                            <input id="checkbox18" class="form-check-input"
                                                                type="checkbox" name="toggleDragModeOnDblclick" checked>
                                                            <label class="form-check-label" for="checkbox18">
                                                                ToggleDragModeOnDblclick
                                                            </label>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div> <!-- end .docs-options -->

                                        </div> <!-- end col -->
                                    </div><!--end row-->
                                </div> <!-- end card-body -->
                            </div> <!-- end card -->
                        </div> <!-- end col -->
                    </div>
                    <!--end row-->


                </div> <!-- container -->

            </div> <!-- content -->

            @@include('./partials/footer.html')

        </div>

        <!-- ============================================================== -->
        <!-- End Page content -->
        <!-- ============================================================== -->

    </div>
    <!-- END wrapper -->

    @@include('./partials/right-sidebar.html')

    @@include('./partials/footer-scripts.html')

    <!-- Plugins js -->
    <script src="assets/vendor/cropper/cropper.min.js"></script>

    <!-- Init js-->
    <script src="assets/js/pages/form-imagecrop.init.js"></script>

    <!-- App js -->
    <script src="assets/js/app.min.js"></script>

</body>

</html>